import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, TouchableWithoutFeedback, ImageBackground} from 'react-native';
import {withNavigation} from 'react-navigation';

import utils from "../common/utils";

const width = utils.getScreen().width,
    rate = 3;
const itemWidth = (width - rate * 4) / 2;

class ListItem extends PureComponent {
    _onPress = () => {
        const {onPressItem, item, navigation} = this.props;
        if (onPressItem) {
            onPressItem(item.num_iid);
        } else {
            let data = {itemId: item.num_iid};
            navigation.navigate('goodsDetail', data);
        }
    };

    render() {
        const {item, moreStyle, type} = this.props;
        const isSingle = type === 'single';
        return (
            <TouchableWithoutFeedback onPress={this._onPress}>
                <View style={[isSingle ? singleStyles.item : styles.item, moreStyle]}>
                    <Image source={{uri: item.pict_url}}
                           style={isSingle ? singleStyles.img : styles.img}
                           resizeMode="stretch"/>
                    <View style={isSingle ? singleStyles.info : styles.info}>
                        <Text numberOfLines={2} style={isSingle ? singleStyles.title : styles.title}>{item.title}</Text>
                        {
                            isSingle ? <View style={{flexDirection: 'row'}}>
                                <View style={singleStyles.commission}>
                                    <Text style={{fontSize: 10, color: '#f42d17'}}>预估佣金：￥{item.commission}</Text>
                                </View>
                            </View> : null
                        }
                        <View style={styles.salesInfo}>
                            <Text style={styles.gray}>天猫价￥{item.zk_final_price}</Text>
                            <Text style={styles.gray}>月销{item.volume}</Text>
                        </View>
                        {
                            isSingle ? null : <View style={styles.salesInfo}>
                                <Text style={styles.gray}>预估佣金：￥{item.commission}</Text>
                            </View>
                        }
                        <View style={styles.price}>
                            <Text style={styles.red}>￥<Text style={styles.newPrice}>{item.tao_ke_price}</Text></Text>
                            <ImageBackground source={require('../images/coupon_bg.png')}
                                             style={{
                                                 width: 51,
                                                 height: 22,
                                                 justifyContent: 'center',
                                                 alignItems: 'center'
                                             }}>
                                <Text style={styles.couponText} fontVariant="small-caps">券￥{item.coupon_value}</Text>
                            </ImageBackground>
                        </View>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

const singleStyles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        paddingTop: 8,
        paddingBottom: 8,
        paddingLeft: 16,
        paddingRight: 16,
        backgroundColor: '#fff'
    },
    img: {
        width: 110,
        height: 110,
        marginRight: 10
    },
    info: {
        flex: 1,
        height: 110,
        paddingTop: 4
    },
    title: {
        fontSize: 12,
        color: '#333',
        height: 32,
        lineHeight: 14
    },
    commission: {
        marginTop: 8,
        marginBottom: 12,
        paddingLeft: 12,
        paddingRight: 12,
        paddingTop: 2,
        paddingBottom: 2,
        borderRadius: 16,
        backgroundColor: '#fddeda'
    }
});
const styles = StyleSheet.create({
    item: {
        width: itemWidth,
        backgroundColor: '#fff'
    },
    img: {
        width: itemWidth,
        height: itemWidth
    },
    info: {
        height: 100,
        padding: 4
    },
    title: {
        fontSize: 11,
        color: '#333',
        lineHeight: 14,
        marginBottom: 6,
        width: '100%'
    },
    salesInfo: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    gray: {
        color: '#939393',
        fontSize: 10
    },
    price: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 6
    },
    red: {
        color: '#e83018',
        fontSize: 10
    },
    newPrice: {
        fontSize: 15
    },
    couponText: {
        fontSize: 11,
        color: '#fff6cc'
    }
});

export default withNavigation(ListItem);
